<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 支付 </title>
    <script  src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
     *{
         margin:0;
         padding:0;
         box-sizing: border-box;
         font: 12px/20px tahoma, arial, "Hiragino Sans GB", "\5b8b\4f53",
        sans-serif;
     }

     body{
         background-color: #eee;
     }

     .header,.nowPay{
         display: flex;
         background-color: #08f;
         color:white;
         height: 35px;
         align-items: center;
         justify-content: center;
         box-shadow: 0 2px 5px #ccc;
         margin:0 0 15px 0;
         border:none;
     }

     .price{
         background-color: white;
        height: 35px;
        border-width: 1px 0 1px 0;
        border-style: solid;
        border-color:#ddd;
        display: flex;
        padding:0 15px 0 15px;
        justify-content: space-between;
        align-items: center;
        margin-bottom:15px;
    }

     .price div:last-child{
         color:orangered
     }

     .price .rmb{
         font-size:14px;
     }

     .payType{
         background-color: white;
         height: auto;
         padding:0 15px;
     }

     .payType .title {
         height: 25px;
         line-height: 25px;
         border-bottom: 1px solid #eee;
     }
     .type {
         font-size:14px;
         height: 35px;
         line-height: 35px;
     }
     .type span{
         color:#999;
     }

     .nowPay{
         background-color: orangered;
         width:80%;
         margin:15px auto;
     }

     .loading{
         width:30px;
         height: 30px;
         position: fixed;
         border:2px solid #08f;
         border-top-color:transparent;
         display: none;
         left: 50%;
         top: 50%;
         transform: translate(-50%,-50%);
         border-radius:50%;
     }

     .rotate{
         display: block;
        animation: loading 1s infinite;
     }

     @keyframes loading {
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
     }

</style>
<body>
     {{ if isOk }}
         <style>
             .isOk{
                 width: 100%;
                 height: 150px;
                 background-color: #08f;
                 color:white;
                 text-align: center;
                 line-height: 150px;
                 font-size:25px;
             }
         </style>
         <div class="isOk">
             该订单已经支付完成
         </div>
     {{ else }}
        <div class="loading">
        </div>
        <div class="header">
            支付
        </div>
        <div class="price">
                <div> 支付金额 </div>
                <div> ￥ <b class="rmb">{{ price }}</b> </div>
        </div>
        <div class="payType">
            <div class="title">
                支付方式
            </div>
            <div class="type">
                余额 (<span> {{balance}} </span>)
            </div>
        </div>
        <button class="nowPay">
            立即支付
        </button>
     {{ /if }}
</body>
<script>
      $(function(){
          let return_url = '{{ return_url }}'
          let notify_url = '{{ notify_url }}'
          let price = '{{ price }}'
          $(".nowPay").click(function(){
              $(this).html("支付中...").css({"background":"#ccc","color":"#08f"}).prop("disabled","true");
              $(".loading").addClass("rotate")
              if('{{ noDollar }}' === "true"){
                     $(this).html("点击支付").css({"background":"orangered","color":"white"}).prop("disabled",false);
                     alert("余额不足");
                     $(".loading").removeClass("rotate");
              }else{
                $.get('{{ pay_hander_url }}?role={{ role }}&orderNo={{ orderNo }}&return_url='+return_url+"&notify_url="+notify_url+"&fromId={{ fromId }}&toId={{ toId }}",(res)=>{
                    setTimeout(()=>{
                        $(".loading").removeClass("rotate");
                        if(res.isOk === "true"){
                            location.replace("{{ return_url }}?isOk=true&code="+res.code);
                        }else{
                            location.replace("{{ return_url }}?code="+res.code);
                        }
                    },500)
                })
              }
          })
      })
</script>
</html>